<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>

    <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js" type="text/javascript" charset="utf-8"></script>
    <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>

<body>


<div id="d1">
    <div class="panel panel-info">
        <div class="panel-heading">图书系统</div>
        <div class="panel-body">
            <form class="form-inline" style="margin: 10px 0; margin-left: 12%;">
                <div class="form-group">
                    <label for="exampleInputEmail2">书名：</label>
                    <input type="text" class="form-control" id="exampleInputEmail2" v-model="bookName">
                </div>
                <button type="button" class="btn btn-primary" style="margin: 0 4%;" @click="execution()">提交</button>
            </form>
        </div>
    </div>

    <table class="table table-striped">
        <thead>
        <tr>
            <th>编号</th>
            <th>书名</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(tbodth,cc) in tbodths.data">
            <td v-text="cc+1"></td>
            <td v-text="tbodth.bookName"></td>
            <td><a href="" @click.prevent="deletee(tbodth)">删除</a></td>
        </tr>
        </tbody>
    </table>
</div>

<script type="text/javascript">
    Vue.config.keyCodes = {

        f2: 113

    }
    var vm = new Vue({
        el: "#d1",
        data: {


            bookName: "",

            tbodths: "",
            bookList: {data:[]}
        },
        methods: {
            execution() {
                if (this.bookName == "") {
                    alert("为空")

                } else {
                    if ( this.bookList.data.indexOf(this.bookName) != -1 ) {
                        /*   console.log(this.bookList)*/
                        /*    console.log(this.bookList.indexOf(this.bookName, 0))*/
                        console.log(this.bookList.data.indexOf(this.bookName))


                        var book = {
                            account: "wy",
                            bookName: this.bookName
                        }
                        this.bookList.data.push(this.bookName);
                        this.tbodths.data.push(book)
                        this.$http.post('rb', {
                            mission: "insert",
                            datas: JSON.stringify(book)
                        }, {emulateJSON: true}).then(function (res) {

                        }, function (res) {
                            console.log("ghj")
                        })
                        this.bookName = "";
                    } else {
                        console.log(this.bookList.data)
                        alert("输入重复数据")

                    }
                }

            }

            , deletee(data) {
                var index = this.tbodths.data.indexOf(data, 0);
                this.tbodths.data.splice(index, 1);
                this.$http.post('rb', {
                    mission: "delete",
                    datas: JSON.stringify(data)
                }, {emulateJSON: true}).then(function (res) {

                }, function (res) {
                    console.log("ghj")
                })


            }
        }, created: function () {
            var _this = this;
            var isHas = false;
            this.$http.post("rb").then(function (value) {
                console.log(value.body)
                if (value.body != "") {
                    isHas = true;
                }
                _this.tbodths = value.body;
            });
            if (isHas) {
                for (bok in _this.tbodths.data.bookName) {
                    _this.bookList.data.push(bok);
                }
            }
        }
    })
</script>

</body>

</html>